<template>
<div class="app">
 <my-head title="公告详情" :go="true" ri=""></my-head>
 <!-- 中间内容部分 -->
 <div class="content">
<ul v-for="(item,index) in list" :key="index" @click="detailed">
  <li><span>{{item.title}}</span></li>
  <li>{{item.time}}</li>

</ul>
 </div>
 </div>
</template>

<script>
import Head from '@/components/Head'
export default {
name:"app",
data(){
  return{
  list:[]
  }
},
created(){
  this.$http.get("../../../../../../static/js/latestannouncement.json").then((res)=>{
    console.log(res.data.announcement)
    this.list=res.data.announcement
  }),()=>{
    console.log("获取数据失败")
  }
},
  components: {
    myHead:Head
  },
  methods:{
    detailed(){
       this.$router.push({path:"/notice"})
    }
  }
}
</script>

<style scoped>
.app .head{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
/* 中间内容部分 */
.content{
  background: #F5F5F6;
  margin-top: 0.5rem;
}
.content ul{
  display: flex;
}
.content ul li{
  margin-bottom: 0.1rem;
  background: white;
  flex:1;
  padding: 0.2rem 0;
}
.content ul li span{
  display: block;
  width: 2.5rem;
  margin-left: 0.2rem;
  overflow:hidden;
  text-overflow:ellipsis; 
  white-space:nowrap;
}


</style>
